{% extends 'base.html' %}
{% load custom_filters %}

{% block title %}{{ rule.title }} - {{ site_info.site_name }}{% endblock %}

{% block extra_css %}
<style>
    .rule-detail-card {
        position: relative;
    }
    
    .rule-content {
        padding: 20px 0;
    }
    
    .rule-content pre {
        background-color: var(--card-bg);
        padding: 15px;
        border-radius: 5px;
        border: 1px solid var(--border-color);
    }
    
    /* MD和文本格式切换 */
    .format-controls {
        margin-bottom: 15px;
        text-align: right;
    }
    
    /* 调整标题大小 */
    .rule-content h1 {
        font-size: 1.75rem;
    }
    
    .rule-content h2 {
        font-size: 1.5rem;
    }
    
    .rule-content h3 {
        font-size: 1.3rem;
    }
    
    .rule-content h4 {
        font-size: 1.2rem;
    }
    
    .rule-content h5 {
        font-size: 1.1rem;
    }
    
    .rule-content h6 {
        font-size: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-9">
        <div class="card mb-4 rule-detail-card">
            <div class="card-header bg-primary text-white py-3">
                <h2 class="mb-0">{{ rule.title }}</h2>
            </div>
            
            <div class="card-body">
                <div class="mb-3">
                    {% for tag in rule.tags.all %}
                        <span class="badge {% if tag.category == 'language' %}bg-primary{% else %}bg-success{% endif %} tag-badge">{{ tag.name }}</span>
                    {% endfor %}
                </div>
                
                <div class="format-controls">
                    <button class="btn btn-sm btn-outline-secondary" id="show-md-btn">
                        <i class="fas fa-code me-1"></i> MD格式
                    </button>
                    <button class="btn btn-sm btn-outline-secondary active" id="show-text-btn">
                        <i class="fas fa-font me-1"></i> 文本格式
                    </button>
                </div>
                
                <div class="rule-content mb-4" id="text-content">
                    {{ rule.content|markdown_safe }}
                </div>
                
                <div class="rule-content mb-4 d-none" id="md-content">
                    <pre><code>{{ rule.content }}</code></pre>
                </div>
                
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted">作者: {{ rule.author.username }}</small><br>
                        <small class="text-muted">发布于: {{ rule.created_at|date:"Y年m月d日" }}</small>
                    </div>
                    <div>
                        <button class="btn btn-outline-secondary copy-rule-btn me-2" data-rule-id="{{ rule.id }}">
                            <i class="fas fa-copy me-1"></i> 复制规则
                        </button>
                        <button class="btn btn-outline-secondary download-md-btn me-2" data-rule-id="{{ rule.id }}" title="下载MD文件">
                            <i class="fas fa-download me-1"></i> 下载MD
                        </button>
                        <button class="btn btn-outline-secondary copy-url-btn me-2" data-rule-id="{{ rule.id }}" title="复制链接">
                            <i class="fas fa-link me-1"></i> 复制链接
                        </button>
                        <a href="{% url 'rules:list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i> 返回列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <!-- 作者信息 -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">作者信息</h5>
            </div>
            <div class="card-body">
                <h6>{{ rule.author.username }}</h6>
                {% if rule.author.profile.bio %}
                    <p>{{ rule.author.profile.bio|truncatechars:100 }}</p>
                {% else %}
                    <p class="text-muted">该用户还没有添加个人简介</p>
                {% endif %}
                
                {% if rule.author.profile.website %}
                    <a href="{{ rule.author.profile.website }}" target="_blank" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-globe me-1"></i> 个人网站
                    </a>
                {% endif %}
            </div>
        </div>
        
        <!-- 相关规则 -->
        {% if related_rules %}
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">相关规则</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        {% for related_rule in related_rules %}
                            <li class="list-group-item">
                                <a href="{% url 'rules:detail' related_rule.id %}">{{ related_rule.title }}</a>
                                <div>
                                    {% for tag in related_rule.tags.all %}
                                        <span class="badge {% if tag.category == 'language' %}bg-primary{% else %}bg-success{% endif %} tag-badge">{{ tag.name }}</span>
                                    {% endfor %}
                                </div>
                                <small class="text-muted">作者: {{ related_rule.author.username }}</small>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}
    </div>
</div>

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 复制规则
        $('.copy-rule-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            
            $.ajax({
                url: "{% url 'rules:copy_content' 0 %}".replace(/0/, ruleId),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        // 创建临时textarea来复制内容
                        var tempTextarea = $('<textarea>');
                        $('body').append(tempTextarea);
                        tempTextarea.val(data.content).select();
                        document.execCommand('copy');
                        tempTextarea.remove();
                        
                        // 显示复制成功提示
                        alert('规则内容已复制到剪贴板！');
                    }
                }
            });
        });
        
        // 下载MD文件功能
        $('.download-md-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            window.location.href = "{% url 'rules:download_md' 0 %}".replace(/0/, ruleId);
        });
        
        // 复制URL功能
        $('.copy-url-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            
            $.ajax({
                url: "{% url 'rules:get_url' 0 %}".replace(/0/, ruleId),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        // 创建临时textarea来复制URL
                        var tempTextarea = $('<textarea>');
                        $('body').append(tempTextarea);
                        tempTextarea.val(data.url).select();
                        document.execCommand('copy');
                        tempTextarea.remove();
                        
                        // 显示复制成功提示
                        alert('规则链接已复制到剪贴板！');
                    }
                }
            });
        });
        
        // 切换内容格式
        $('#show-md-btn').click(function() {
            $('#text-content').addClass('d-none');
            $('#md-content').removeClass('d-none');
            $(this).addClass('active');
            $('#show-text-btn').removeClass('active');
            
            // 记录查看MD格式的操作
            var ruleId = $(this).closest('.rule-detail-card').find('.copy-rule-btn').data('rule-id');
            $.ajax({
                url: '/rules/record-md-view/' + ruleId + '/',
                type: 'GET',
                dataType: 'json'
            });
        });
        
        $('#show-text-btn').click(function() {
            $('#md-content').addClass('d-none');
            $('#text-content').removeClass('d-none');
            $(this).addClass('active');
            $('#show-md-btn').removeClass('active');
        });
    });
</script>
{% endblock %}
{% endblock %} 